<template>
  <div id="main">
    <div data-reactroot="" class="MWFREEREGISTER_wrap">
      <div>
        <div>
          <div class="container-fluid">
            <div class="free-register-content">
              <div class="free-register-newreg">
                <div>
                  <div class="free-register-content-newreg">
                    <h2 class="free-register-heading-newreg">
                      Create a free account
                    </h2>
                  </div>
                  <div class="free-register-text-input-email-newreg">
                    <span aria-hidden="true" style="font-weight: bold">*</span
                    ><label for="email" class="text-input-label clip-text"
                      >Enter your email</label
                    >
                    <div style="display: flex; align-items: center">
                      <input
                        type="text"
                        class=""
                        placeholder="Enter your email"
                        id="email"
                        name=""
                        value=""
                        autocomplete="new-password"
                        maxlength="50"
                        v-model="emailValue"
                      /><span
                        class="free-register-text-icon fa valid fa-check-circle"
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="paywall-account-form-newreg">
                  <div class="inline-flex-padding">
                    <div style="width: 100%">
                      <div class="free-register-text-input-form-newreg">
                        <span aria-hidden="true" style="font-weight: bold"
                          >*</span
                        ><label
                          for="firstName"
                          class="text-input-label clip-text"
                          >First Name</label
                        >
                        <div style="display: flex; align-items: center">
                          <input
                            type="text"
                            class=""
                            placeholder="First Name"
                            id="firstName"
                            name=""
                            value=""
                            autocomplete="new-password"
                            maxlength="50"
                            v-model="firstName"
                          /><span class="free-register-text-icon fa"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="free-register-text-input-form-newreg">
                    <span aria-hidden="true" style="font-weight: bold">*</span
                    ><label class="text-input-label clip-text"
                      >Create Password</label
                    >
                    <div style="display: flex; align-items: center">
                      <input
                        type="password"
                        class=""
                        placeholder="Create Password"
                        name=""
                        value=""
                        autocomplete="new-password"
                        maxlength="32"
                        v-model="password"
                      /><span
                        class="free-register-password-toggle-newreg hide-password-newreg"
                      ></span>
                    </div>
                  </div>
                  <div>
                    <div class="checkbox-newreg">
                      <label
                        for="checkbox"
                        class="free-register-optins-text-newreg"
                      >
                        <!-- <input
                        type="checkbox"                       
                        id="checkbox"
                        value="checkbox"
                        class="free-register-optins"
                      /> -->
                        I’d like to receive updates and special offers from Dow
                        Jones and affiliates. I can unsubscribe at any time.
                      </label>
                    </div>
                  </div>
                  <div>
                    <div class="privacy-policy-section">
                      <input
                        type="checkbox"
                        id="0_id"
                        value="0"
                        class="privacy-policy-checkbox hidden"
                      /><label for="0_id" class=""
                        ><div></div>
                        <div class="privacy-policy">
                          <!-- react-text: 80 -->By registering you agree to our
                          <!-- /react-text --><a
                            class="a-mw"
                            target="_blank"
                            style="padding-left: 5px; padding-right: 5px"
                            >Terms Of Use</a
                          ><a class="a-mw" target="_blank"></a
                          ><!-- react-text: 83 -->
                          and
                          <!-- /react-text --><a
                            class="a-mw"
                            target="_blank"
                            style="padding-left: 5px"
                            >Privacy Policy</a
                          >
                        </div></label
                      >
                    </div>
                  </div>
                  <div class="button-mw-newreg">
                    <button
                      value="Ok"
                      class="btn free-register-button-newreg-mw"
                      @click="submit"
                    >
                      CONTINUE</button
                    ><span class=""></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import "./account.css";
import loginRequest from "@/api/login.js";
import { useRouter } from "vue-router";
const router = useRouter();
// 使用 ref 创建一个响应式引用
const emailValue = ref("");
const firstName = ref("");
const password = ref("");
//TODO:登录
function submit() {
  let data = {
    email: emailValue.value,
    name: firstName.value,
    password: password.value,
  };
  loginRequest
    .signin(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res);
        router.push({ path: "/login" });
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
</script>
<style lang="scss" scoped>
*,
:after,
:before {
  box-sizing: border-box;
}
.main {
  padding: 0 auto;
}
.container--welcome-feature[data-v-2e0e8825] {
  max-width: 100%;
  background-image: url(https://sts3.wsj.net/bucket-a/maggie/static/images/welcome-feature.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top: -30px;
}
@media only screen and (min-width: 75em) {
  .container {
    width: 78rem;
  }
}
.container--welcome-feature .region-feature[data-v-2e0e8825],
.container--welcome-feature > .region[data-v-2e0e8825] {
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 0 60px;
  color: #fff;
}
.component[data-v-2e0e8825],
.region[data-v-2e0e8825] {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 1295px) {
  .container--welcome-feature .column--half {
    max-width: 640px;
  }
}
.column {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  padding: 0 10px;
  width: 100%;
}
.element[data-v-2e0e8825],
.group[data-v-2e0e8825],
.list[data-v-2e0e8825] {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}
#main {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (max-width: 1295px) {
  .container--welcome-feature .column--half.feature-img {
    max-width: 320px;
  }
}
.free-register-content {
  display: flex;
  justify-content: space-around;
}
@media (min-width: 520px) {
  .free-register-newreg {
    width: 645px;
    height: 432px;
  }
}
.free-register-content-newreg {
  display: flex;
  justify-content: left;
}
.free-register-text-input-email-newreg {
  width: 400px;
  position: relative;
}
@media (min-width: 520px) {
  .free-register-heading-newreg {
    font-family: Mulish, Georgia, serif;
    text-align: left;
    font-size: 48px;
    line-height: 60px;
    font-weight: 800;
    color: #fff;
    width: 620px;
  }
}
h2 {
  margin: 4px 0;
  font-style: normal;
}
.free-register-text-input-email-newreg .clip-text,
.free-register-text-input-form-newreg .clip-text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}
.free-register-text-input-email-newreg input,
.free-register-text-input-form-newreg input {
  color: #fff;
  height: 35px;
  background-color: #ffffff1a;
  font-size: 14px;
  font-family: Lato, sans-serif;
  font-weight: 400;
  border-radius: 2px;
  border: none;
  border-bottom: 3px solid #fff;
  margin-top: 20px;
}
.free-register-text-icon {
  position: absolute;
  right: 10px;
  opacity: 0;
}
.paywall-account-form-newreg {
  position: relative;
  width: 400px;
}
.inline-flex-padding {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  align-items: baseline;
}
.free-register-text-input-form-newreg {
  position: relative;
}
.free-register-optins {
  margin: 5px;
  width: 34px;
  // height: 34px;
  border: 1px solid #fff;
}
</style>
